<template>
  <a-input class="p-input" v-model="myValue" @change="valueChange">
    <span slot="addonBefore">{{ label + '：' }}</span>
    <div slot="suffix" class="p-input-code" @click="refreshCode">
      <p-code :identifyCode="identifyCode"></p-code>
    </div>
  </a-input>
</template>

<script>
export default {
  props: {
    label: {
      type: String,
      require: true
    }
  },
  data() {
    return {
      myValue: '', // 输入框绑定值
      identifyCodes: '1234567890abcdefjhijklinopqrsduvwxyz', //随机串内容
      identifyCode: '' // 验证码
    }
  },
  components: {
    pCode: () => import('@/components/p-code.vue')
  },
  mounted() {
    // 初始化验证码
    this.identifyCode = ''
    this.makeCode(this.identifyCodes, 4)
  },
  methods: {
    // 输入框值变化
    valueChange(e) {
      this.$emit('change', e.target.value)
    },
    // 重置验证码
    refreshCode() {
      this.identifyCode = ''
      this.makeCode(this.identifyCodes, 4)
    },
    //获取验证码的值
    makeCode(o, l) {
      for (let i = 0; i < l; i++) {
        //通过循环获取字符串内随机几位
        this.identifyCode += this.identifyCodes[
          this.randomNum(0, this.identifyCodes.length)
        ]
      }
    },
    //随机数字：用于当角标拿字符串的值
    randomNum(min, max) {
      return Math.floor(Math.random() * (max - min) + min)
    }
  }
}
</script>

<style lang="less" scoped>
.p-input {
  width: 31.3%;
}

/deep/.ant-input-group-addon {
  width: 36%;
  line-height: 27px;
  text-align: right;
  font-size: 14px;
  color: #333333;
  background: #ffffff;
}

/deep/.ant-input {
  width: 100%;
  padding: 23px 11px;
}

/deep/.ant-input-suffix {
  right: 10px;
  top: 56%;
}

.p-input-code {
  cursor: pointer;
}
</style>
